<template>
  <div>
    <div class="follow_header">
      <div class="follow_title">关注</div>
      <Menu mode="horizontal" :active-name="highlight" class="user_menu" @on-select="navigateTo">
        <MenuItem name="followings">关注了</MenuItem>
        <MenuItem name="followers">关注者</MenuItem>
      </Menu>
    </div>
    <div class="follow_wrapper">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserFollows",
  data() {
    return {
      highlight: this.$route.name,
      peopleid: this.$route.params.uid
    };
  },
  watch: {
    $route(val) {
      this.highlight = val.name;
    }
  },
  methods: {
    navigateTo(name) {
      this.$router.push("/user/" + this.peopleid + "/" + name);
    }
  },
  mounted() {}
};
</script>

<style lang='scss'>
.follow_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 0 20px;
  .follow_title {
    display: flex;
    align-items: center;
    font-weight: 700;
  }
  .ivu-menu {
    z-index: 0 !important;
  }
  .ivu-menu-horizontal.ivu-menu-light:after {
    display: none !important;
  }
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu {
    border: none !important;
    padding: 0 1rem !important;
  }
}
.follow_wrapper {
  min-height: 5rem;
}
</style>